<template>
    <div class="id-select">
        <div class="title">
            <p>欢迎使用安牛有借，信息真实</p>
            <span>请选择身份</span>
        </div>
        <div class="select-item" :class='{active:index == 0,borrow:(index == 0 || index == -1)}' @click='index = 0'>
            <p class='id-text'>我要借钱</p>
            <!-- <span class='id-slogen'>寻找出借人</span> -->
            <p class="id-type">我是借款人</p>
            <span class='id-logo'></span>
        </div>
        <div class="select-item" :class='{active:index == 1,lend:(index == 1 || index == -1)}' @click='index = 1'>
            <p class='id-text'>我要放款</p>
            <!-- <span class='id-slogen'>寻找借款人</span> -->
            <p class="id-type">我是出借人</p>
            <span class='id-logo'></span>
        </div>
        <div v-if='index != -1' class="confirm" :class='{borrow:index == 0}' @click='confirm'>确定</div>
        <div v-if='index != -1' class="confirm-text" :class='{borrow:index == 0}'>身份选择后不可修改</div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import toggle from '../components/Toggle.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import bankCard from '../filters/filter-bankCard'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { userApi, lenderApi, loginApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toggle,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        filters:{
            bankCard
        },
        data() {
            return {
                index:-1,
                action:this.$route.query.action
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
            ]),
            hasMine(){
                return !_.isEmpty(this.mine)
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            bizRole(){
                if(this.index == 0) return 'C'
                if(this.index == 1) return 'B'
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setNeedLogin',
                'setHasTradePassword',
                'setUserInfo',
                'setGoHome'
            ]),
            // function

            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            clear(){
                localStorage.clear()
            },
            confirm(){
                this.showLoading()
                userApi.setBizRole({
                    bizRole:this.bizRole
                })
                .then(this.setUserInfo)
                .then(result=>{
                    this.setMsgTip({
                        text:'选择身份成功！',
                        type:'success'
                    })

                    this.hideLoading()
                    if(this.action == 'back'){
                        this.$router.back()
                        return
                    }
                    this.$router.replace({
                        name:'loan-in-index'
                    })
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })
            },
        },
        created(){
            this.setGoHome(false)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .id-select{
        .title{
            text-align: center;
            p{
                @extend %font-caption;
                padding-top: 16px;
            }
            span{
                display: block;
                @extend %font-subhead;
                color:$importColor;
            }
        }
        .select-item{
            padding:32px 10px;
            margin:46px 32px 64px 32px;
            border-radius:2px;
            box-shadow:0 0 4px 0 $sectionColor, 0 4px 4px 0 $sectionColor;
            background-color: #fff;
            text-align: center;
            color:$grayLight;
            position: relative;
            transition:box-shadow ease .3s;
            &.borrow{
                .id-text{
                    color:$orange;
                }
                .id-slogen{
                    color:$importColor;
                }
                .id-type{
                    background-color:$orange;
                }
                .id-logo{
                    background-image: url(../images/c_borrower@3x.png);
                }
            }
            &.lend{
                .id-text{
                    color:$purple;
                }
                .id-slogen{
                    color:$importColor;
                }
                .id-type{
                    background-color:$purple;
                }
                .id-logo{
                    background-image: url(../images/c_lender@3x.png);
                }
            }
            &.active{
                box-shadow:0 0 16px 0 $sectionColor, 0 16px 16px 0 $sectionColor;
            }
        }
        .id-text{
            @extend %font-headline;
            font-size: 24px;
        }
        .id-slogen{
            @extend %font-caption;
        }
        .id-type{
            background-color: $placeholderColor;
            @extend %font-body1;
            color:#fff;
            padding:5px 11px 5px 54px;
            text-align: right;
            position: absolute;
            top:-33px;
            left:16px;
            border-radius:0 4px -0 0;
        }
        .id-logo{
            width: 80px;
            height: 64px;
            position: absolute;
            top:-34px;
            left:-16px;
            background: url(../images/c_lender-inactive@3x.png) no-repeat center center;
            background-size: 80px 64px;
        }
        .confirm{
            width: 64px;
            margin:0 auto;
            line-height:64px;
            color:#fff;
            text-align: center;
            @extend %font-button;
            background-color: $purple;
            border-radius:50%;
            box-shadow:0 0 8px 0 $sectionColor, 0 8px 8px 0 $sectionColor;
            transition:background ease .3s;
            &:active{
                background-color: darken($purple,10%);
            }
            &.borrow{
                background-color: $orange;
                &:active{
                    background-color: darken($orange,10%);
                }
            }
        }
        .confirm-text{
            padding-top: 9px;
            @extend %font-caption;
            color: $purple;
            text-align: center;
            &.borrow{
                color: $orange;
            }
        }
    }

</style>
